<template>
	<view id="app">
		<view class="container pr zi10 df fdc aic">
			<view class="homeTop"></view>
			<view class="wh300 avatar oh">
				<image :src="member.avatar" class="avatar"></image>
			</view>
			<view class="df aic mb20">
				<view class="f36 cw fw8">{{member.name}}</view>
			</view>
			<view class="df aic">
				<uv-tags text="实名认证" shape="circle" size="large" bgColor="#ffffff" color="#FFAC3E" border-color="#ffffff" v-if="member.is_auth == '1'"></uv-tags>
				<uv-tags text="专业技能书" shape="circle" size="large" bgColor="#ffffff" color="#FFAC3E" border-color="#ffffff" v-if="member.great_images !=''"></uv-tags>
				<uv-tags :text="member.great_name" shape="circle" bgColor="#ffffff" size="large" color="#FFAC3E" border-color="#ffffff" v-if="member.great !='0'"></uv-tags>
			</view>
			<view class="h50"></view>
		</view>
		<view class="container pr zi10">
			<view class="w100p aic bgw br15">
				<view class="tab">
					<uv-tabs :list="tabs" lineWidth="80" 
						lineColor="#FFAC3E" 
						:activeStyle="{
							color: '#FFAC3E',
				
						}"
						:inactiveStyle="{
							color: '#666',
						}" 
						itemStyle="width:120rpx;font-size:26rpx;font-weigh:400;height:100rpx;" @click="navclick"></uv-tabs>
				</view>
				<view class="content" v-if="cindex == 0">
					<view class="f32 fw5 tac pr w150 mb20">
						<view class="border"></view>
						<view class="txt">简介</view>
					</view>
					<view class="df fdc mb20">
					<view class="df f28 c000 ptb10" v-if="member.workage == 1">工作年限:1-3年</view>
					<view class="df f28 c000 ptb10" v-if="member.workage == 2">工作年限:3-5年</view>
					<view class="df f28 c000 ptb10" v-if="member.workage == 3">工作年限:5-10年</view>
					<view class="df f28 c000 ptb10" v-if="member.workage == 4">工作年限:10年以上</view>
					<view class="df f28 c000 ptb10" v-if="member.tags">擅长技能:{{member.tags}}</view>
					<uv-parse :content="course" :tagStyle="style"></uv-parse>
					</view>
					<view class="f32 fw5 tac pr w150 mb20" v-if="member.great_images">
						<view class="border"></view>
						<view class="txt">技能证书</view>
					</view>
					<view class="df fdc mb20"  v-if="member.great_images">
						<uv-parse :content="great" :tagStyle="style"></uv-parse>
					</view>
					<view class="f32 fw5 tac pr w150 mb20">
						<view class="border"></view>
						<view class="txt">推荐星级</view>
					</view>
					<view class="ptb20 df aic jcc">
						<uv-rate :count="5" v-model="member.star" size="32"></uv-rate>
					</view>
				</view>
				<view class="content" v-if="cindex == 1">
					<uv-grid col="3">
						<uv-grid-item v-for="(item,index) in member.cases" :key="index">
							<view class="item bgw oh" @click="preview(item)">
								<view class="item-top">
									<image :src="item.thumb"></image>
								</view>
								<view class="f28 c000 thd ptb10">{{item.title}}</view>
							</view>
						</uv-grid-item>
					</uv-grid>
				</view>
				<view class="content" v-if="cindex == 2">
					<uv-parse :content="tools" :tagStyle="style"></uv-parse>
				</view>
				<view class="content" v-if="cindex == 3">
					<view class="comment" v-if="comment.length >0">
						<view class="comment-list" v-for="(item,index) in comment" :key="index">
							<view class="comment-con">
								<view class="left">
									<uv-avatar size="100rpx" :src="item.user.avatar"></uv-avatar>
								</view>
								<view class="right">
									<view class="name">{{item.user.nickname}}</view>
									<view class="rows">
										<uv-rate :count="5" v-model="item.comment_rate"></uv-rate>
										<view class="f26 c666">{{item.create_time}}</view>
									</view>
								</view>
							</view>
							<view class="df fdc">
								<view class="c000 f28 ptb15">
									{{item.comment_remark}}
								</view>
								<view class="mtb20">
								<uv-album :urls="item.images" keyName="url" singleSize="660rpx" multipleSize="220rpx"  space="10rpx" :showMore="false"></uv-album>
								</view>
							</view>
							<view class="comment-back1" v-if="item.reply">
								{{member.name}}:{{item.reply}}
							</view>
							<view class="comment-back" v-if="item.reply_admin">
								平台回复:{{item.reply_admin}}
							</view>	
						</view>
					</view>
				</view>
				<view class="more-bata">
					<view class="txt">
						版权所有(©)匠徕徕
					</view>
				</view>
				<view class="h50"></view>
			</view>
		</view>
		<q-previewImage ref="previewImage" :urls="imgs" :titles="titles" @onLongpress="onLongpress" @open="open" @close="close"></q-previewImage>
		<view class="footer ft">
			<view class="bottom">
				<view class="icon" @click="reLaunch()">
					<uv-icon name="home" size="40rpx" color="#333"></uv-icon>
					<view class="txt">首页</view>
				</view>
				<view class="icon">
					<button type="default" open-type="contact" class="zixun"  hover-class="none">
					<uv-icon name="chat" size="40rpx" color="#333"></uv-icon>
					<view class="txt">咨询</view>
					</button>
				</view>
				<view class="icon" @click="collection()">
					<uv-icon name="heart" size="40rpx" color="#333"></uv-icon>
					<view class="txt">收藏</view>
				</view>
				<view class="icon">
					<button type="default" open-type="share" class="zixun"  hover-class="none">
					<uv-icon name="share" size="40rpx" color="#333"></uv-icon>
					<view class="txt">分享</view>
					</button>
				</view>
				<view class="btn btn2" @click="handle()">立即预约</view>
				<view class="btn btn1" @click="callphone()">呼叫师傅</view>
			</view>
			<uv-safe-bottom></uv-safe-bottom>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id:0,
				cindex:0,
				style:{
					p:"font-size:28rpx;",
					image:'with:100%;height:auto;'
				},
				tabs:[
					{name:"个人履历"},{name:'施工案例'},{name:'施工工具'},{name:"用户评价"}
				],
				titles:[],
				imgs: [],
				course:"",
				great:"",
				member:{
					name:"",
					avatar:"",
				},
				comment:[],
				tools:[],
				page:1,
				more:true,
				nodata:true,
			}
		},
		async onLoad(e){
			await this.$onLaunched;
			this.id = e.id;
			this.getMember();
		},
		onReachBottom(){
			if(this.more == false){
				return false;
			}
			this.getComment();
		},
		methods: {
			preview(item) {
				console.log(item);
				this.imgs = item.images.split(',');
				this.titles = ["施工项目："+item.title,"使用瓷砖胶品牌："+item.adhesive,"使用瓷砖品牌："+item.tile]
				this.$nextTick(()=>{
					 this.$refs.previewImage.open(this.imgs[0]); // 传入当前选中的图片地址(小程序必须添加$nextTick，解决组件首次加载无图)
				})
			},
			open(){ //监听组件显示 （隐藏TabBar和NavigationBar，隐藏video原生组件）
				uni.hideTabBar()
				uni.setNavigationBarColor({
				   frontColor: '#000000', // 设置前景色为黑色
				   backgroundColor: '#000000', // 设置背景色为黑色
				 }) 
			},
			close(){ //监听组件隐藏 （显示TabBar和NavigationBar，显示video原生组件）
				uni.showTabBar()
				uni.setNavigationBarColor({
				   frontColor: '#000000', // 设置前景色为白色
				   backgroundColor: '#ffffff', // 设置背景色为黑色
				 })
			},
			handle(){
				if(!uni.getStorageSync('QLXG_token')){
					uni.navigateTo({
						url:'/pages/user/login',
					})
					return false;
				}
				uni.setStorageSync('QLXG_cart',JSON.stringify(this.member));
				uni.navigateTo({
					url:"/pages/user/cate/cart",
				})
			},
			callPhone(){
				if(!uni.getStorageSync('QLXG_token')){
					uni.navigateTo({
						url:'/pages/user/login',
					})
					return false;
				}
				let that = this;
				this.request({
					url:"/api/index/phone",
					data:{user_id:this.id},
					success:function(rlt){
						if(rlt.code == 200){
							that.getPhone(rlt.data);
						}
					}
				})
			},
			getComment:function(){
				let that = this;
				let page = that.page
				this.request({
					url:"/api/index/comment",
					data:{id:this.member.id,page:page},
					success:function(res){
						if(res.code = 200){
							let map = res.data.map((item)=>{
								if(item.images){
									let img = item.images.split(',');
									for(let i=0;i<img.length;i++){
										let u =img[i];
										img.splice(i,1,Object.assign({url:u}));
									}
									item.images = img;
								}
								return item;
							})
						
							if(page == 1){
								that.comment = map;
								if(res.data.length == 0){
									that.nodata=false;
								}
							}else{
								that.comment.push(...map)
								
							}
							that.more = res.data.length < 10 ? false : true;
							that.page=page+1;
							console.log(that.comment);
						}
					}
				})
			},
			getPhone(phone){
				const res = uni.getSystemInfoSync();
				if(res.platform == 'ios'){
					uni.makePhoneCall({
						phoneNumber:phone,
						success:function(e){
							
						},
						fail:function(e){
							
						}
					})
				}else{
					uni.showActionSheet({
						itemList:[phone,'呼叫'],
						success:function(rlt){
							if(rlt.tapIndex == 1){
								uni.makePhoneCall({
									phoneNumber:phone,
									success:function(e){
										
									},
									fail:function(e){
										
									}
								})
							}
						}
					})
				}
			},
			navclick:function(e){
				this.cindex = e.index;
				console.log('item', e);
			},
			getMember(){
				let that = this;
				this.request({
					url:"/api/index/detail",
					data:{id:this.id},
					success:function(rlt){
						if(rlt.code == 200){
							that.member = rlt.data;
							if(rlt.data.course){
								rlt.data.course.map((item)=>{
									that.course+="<img src='"+item+"'>";
								})
							}
							if(rlt.data.tools){
								let tools = rlt.data.tools.split(',');
								tools.map((item)=>{
									that.tools+="<img src='"+item+"'>";
								})
							}
							if(rlt.data.great_images){
								that.great="<img src='"+rlt.data.great_images+"'>";
							}
							that.getComment();
						}
					}
				})
			},
			onShareAppMessage: function (res) {
				let share = this.util.wxShare({title:"匠徕徕名匠分享"});
				return {
				      title: "匠徕徕名匠分享",
				      path: share.path,
				}
			},
		}
	}
</script>

<style lang="less" scoped>
.homeTop {
		position:absolute;
		width: 750rpx;
		height: 330rpx;
		z-index: -1;
		top:180rpx;
		background: linear-gradient(127deg,#fe7235 0%,#faad21 70%,#faad21 100%)
	}
.avatar{border-radius: 50%;}

.tab{padding:0 15rpx; margin-bottom: 20rpx;}
.content{padding:0 15rpx;}
.border{width:90%;height: 0;border-bottom: #fe7235 15rpx solid; border-radius: 0 0 15rpx 15rpx; position: absolute; bottom:0;left:5%;z-index: 1;}
.txt{position: relative; z-index: 10;}
.more-bata{display: flex; flex-direction: column; align-items: center;color:#c3c3c3;margin-top: 10px;margin-bottom: 50px;
		.more{width:130px;height: 50px;}
		.txt{font-size: 26rpx;}
		}
	.item{width:230rpx;display: flex;flex-direction: column;align-items: center;
		.item-top{width:230rpx;height:153rpx;}
	}
	.comment{
		.comment-list{margin-bottom: 20rpx; padding:15rpx 0; display: flex;flex-direction: column;background-color: #fff;border-bottom: 1px solid #eee;
			.comment-con{
				display: flex; flex-direction: row;
				.left{width:100rpx;}
				.right{flex:1;padding-left: 20rpx;display: flex; flex-direction: column;justify-content: center;
					.name{padding:15rpx 0; font-size: 30rpx;}
				}
			}
			.comment-back1{padding:10rpx 15rpx; display: flex;color:#777;font-size: 28rpx;}
			.comment-back{padding:15rpx;color:#000;background-color: #f9f9f9;font-size: 28rpx;}
		}
	}
	.ft{background:#fff; z-index: 5000;}
	.bottom{
		display: flex; flex-direction: row;align-items: center;background-color: #fff; justify-content: center;
		.icon{
			width:90rpx;font-size: 28rpx;
			display: flex;flex-direction: column; align-items: center; justify-content: center;
		}
		.btn{flex:1;font-size: 28rpx;color:#fff;padding:28rpx;display: flex;flex-direction: column; align-items: center; justify-content: center;}
		.btn1{background: #fe7235;}
		.btn2{background: #FFAC3E;}
	}
	.zixun{background-color: #fff !important;border: 0 solid #fff !important;line-height: 1.0; font-size: 28rpx;display: flex; flex-direction: column; padding:0 !important;}
	.zixun::after{border:initial;}
</style>
